<template>
    <el-row class="tac" v-loading="loading">
        <el-col :span="24">

            <el-scrollbar height="100vh">
                <!-- <div
                    style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-left: 10px;">

                    <div style="display: flex; justify-content: center; align-items: center;">
                        <el-icon style="color: #606266;">
                            <Menu />
                        </el-icon>
                        <el-text style="font-size: 16px; margin-left: 10px; font-weight: bold;">流程设计</el-text>
                    </div>
                </div> -->
                <!-- <div class="solid-separator"></div> -->
                <div style="padding: 5px;">
                    <div style="padding: 5px;">
                        <ul style="margin: 0; padding: 0; list-style: none;">
                            <li v-for="(item, index) in flowList" :key="index" @mouseover="handleMouseOver(index)"
                                @mouseout="handleMouseOut(index)"
                                :class="{ 'hovered': isHovered === index, 'clicked': isClicked === index }"
                                style="margin-bottom: 5px;   border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
                                <!-- <img :src="getSrc(item.appIconPath)" alt="" style="height: 25px; width: 25px;"> -->
                                <div class="ellipsis-text" :title="item.name">
                                    {{ (index + 1) + "." + item.name }}
                                </div>
                                <!-- <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right">
                                </el-tooltip> -->

                                <div>
                                    <el-tooltip class="box-item" effect="dark" content="运行" placement="top">

                                        <el-button link type="primary" @click="handleWorking(item, index)"
                                            class="blue-icon">
                                            <el-icon size="20">
                                                <CaretRight />
                                            </el-icon>
                                        </el-button>
                                    </el-tooltip>
                                    <!-- <el-tooltip class="box-item" effect="dark" content="打开xml" placement="top">
                                        <el-button link type="primary" icon="Open" @click="openXml(item)"
                                            class="blue-icon"></el-button>
                                    </el-tooltip> -->
                                </div>

                            </li>

                        </ul>
                    </div>
                </div>

            </el-scrollbar>
        </el-col>


    </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getFlow, getRunXml, listFlow, delFlow, listFlowGeneral } from '../../../api/flow/flow';
import flowNodesStore from '@/store/modules/flowNodes'
import axios from 'axios';
const flowNodes = flowNodesStore()
const activeIndex = ref('1');
const flowData = ref({});
const flowList = ref([])
const loading = ref(false);
onMounted(() => {
    getList();
})
const getList = () => {
    listFlowGeneral({}).then((response: any) => {
        flowList.value = response.data;
    });
}

const switchActiveIndex = (index: string) => {
    activeIndex.value = index;
}

const handleAddNode = () => {
    switchActiveIndex("3");
    flowData.value = {}
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        flowNodes.setFlowNodes([]);
        switchActiveIndex('1');
    }, 300);
}

const handleWorking = (item: any, index: any) => {
    // getRunXml(item.id).then((res: any) => {
    //     if (res.data.xmlPath.includes("http")) {
    //         window.location.href = `StartFlow://${res.data.xmlPath}`;
    //     }
    // });
    axios({
        url: '/api/vueflow/flow/getRunXml/' + item.id,
        method: 'get',
        headers: {
            'Content-Type': 'application/json',
            // 其他必要的请求头
        }
    }).then((res: any) => {
        if (res.data.data.xmlPath.includes("http")) {
            window.location.href = `StartFlow://${res.data.data.xmlPath}`;
        }
    })

}


const openXml = (row: any) => {
    // getRunXml(row.id).then((res: any) => {
    //     window.open(res.data.xmlPath);
    // });
    axios({
        url: '/api/vueflow/flow/getRunXml/' + row.id,
        method: 'get',
    }).then((res: any) => {
        if (res.data.xmlPath.includes("http")) {
            window.open(res.data.xmlPath);
        }
    })
}

const isHovered = ref(-1);
const isClicked = ref(-1);

const handleMouseOver = (index: any) => {
    isHovered.value = index;
};

const handleMouseOut = (index: any) => {
    isHovered.value = -1;
};
</script>
<style scoped>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 3px;
    cursor: pointer;
    color: #606266;
}

.hovered {
    background-color: #e0e0e0;
    /* 鼠标悬停时的背景颜色 */
}

.clicked {
    background-color: #b0e0e6;
    /* 点击时的背景颜色 */
}

.el-col-1 {
    flex: 0 0 4.1666666667%;
    max-width: 1%;
}

.ellipsis-text {
    width: fit-content;
    max-width: 28ch;
    /* 最多显示 7 个字符宽度 */
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.blue-icon {
    color: #1296db;
}

.solid-separator {
    border: 1px solid #ccc;
    margin: 10px 0;
}
</style>